import { Util, shapes } from "./Util";
import { BaseLayer } from "./BaseLayer";

export class Layer extends BaseLayer {
  // hitCanvas = document.createElement('canvas')
  hitCanvas = document.getElementById("hitCanvas") as HTMLCanvasElement;

  // 设置canvas画布大小
  _setCanvasSize(width: number, height: number) {
    this.canvas.width = width;
    this.canvas.height = height;
  }

  public drawScene() {
    const layer = this.getLayer();
    const context = layer.getContext();

    const { width, height } = context.canvas;
    context.clearRect(0, 0, width, height); // 清空画布
    super.drawScene();
  }

  public drawHit() {
    const layer = this.getLayer();
    const context = layer.getHitContext();

    const { width, height } = context.canvas;
    context.clearRect(0, 0, width, height);
    super.drawHit();
  }

  getIntersection(pos) {
    if (!pos) {
      return null;
    }
    let p = this.getHitContext().getImageData(
      Math.round(pos.left),
      Math.round(pos.top),
      1,
      1
    ).data;
    let p3 = p[3];
    let colorKey = "";
    let shape = "";

    if (p3 === 255) {
      colorKey = Util.rgbToHex(p[0], p[1], p[2]);
      shape = shapes["#" + colorKey];
      if (shape) {
        return shape;
      }
    }
  }
}
